<template>
	<div class="box">
		<search-tabs ref="tabsRef" @tabs-click="tabsClick" />
		<!-- 图表组件 -->
		<left-chart ref="leftChartRef" v-model:expanded="chartPannelExpanded" :queryForm="roadForm"></left-chart>
	</div>
	<!-- <el-button type="primary" style="margin-left: 1%; z-index: 999" @click="showTrafficPannel"
        >实时路况</el-button>  -->
	<map-type-control class="fixed right-30px bottom-30px z-100" :rlt="false" :rlfx="true" />
	<div class="rltico">
		<div class="li">
			<div> 城市道路级拥堵程度划分标准:</div> <span class="ct"></span> 畅通 [1.00~1.50]
			<span class="hx"></span> 缓行[1.50~2.00]
			<span class="yd"></span> 拥堵[2.00~4.00]
			<span class="yzyd"></span> 严重拥堵[4.00~]
		</div>
	</div>
</template>

<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		computed,
		onMounted,
		nextTick
	} from 'vue';
	import leftChart from './components/leftChart.vue';

	import {
		useNodeAndRoad
	} from './useNodeAndRoad';
	import inputAngle from '@/views/basic/components/inputAngle.vue';
	import layerTools from '@/components/layerTools/index.vue';
	import {
		useMapStore
	} from '@/store/modules/map';
	import {
		polyline
	} from '@/layout/tabs/maps/polyline';
	// import customDatePicker from '@/components/customDatePicker';
	import {
		getTrafficMonitorByTime
	} from '@/api/tomae';
	import {
		formatToDateTime
	} from '@/utils/dateUtil';
	import {
		useMapTraffic
	} from '@/hooks/map/useMapTraffic';
	import MapTypeControl from '@/components/MapTypeControl/index.vue';
	import searchTabs from './components/searchTabs.vue';

	import emitter from '@/utils/emitter';
	export default defineComponent({
		name: 'TomateIndex',
		components: {
			inputAngle,
			leftChart,
			// customDatePicker,
			layerTools,
			searchTabs,
			MapTypeControl,
		},
		setup() {
			const userStore = useMapStore();

			const state = reactive({
				map: computed(() => userStore.ownMap),
				leftChartRef: null,
				echartShow: true,
				nianduShow: true,
				datePicker: null,
				datePickerTwo: null,
				loading: false,
				chartPannelExpanded: false,
				tabsCurrent: 0,
				roadForm: {},
				tabsRef: null,
			});

			emitter.on('ctlRlfx', (val) => {
				// console.log('ctlRlfx', val);
				state.chartPannelExpanded = false;
			})


			/**
			 * 行政区域和道路选择
			 */
			const {
				nodeId,
				roadId,
				roadList,
				areaOptions,
				reset: resetNodeId
			} = useNodeAndRoad();

			const handleSearch = async () => {
				// const mkrs = state.map.getOverlays();
				state.map.clearOverlays();
				// mkrs.map((item) => state.map.removeOverlay(item));
				state.loading = true;
				const day = sessionStorage.getItem('checkData');
				const startTime = formatToDateTime(state.datePicker.pitchData.startTime, 'YYYYMMDD');
				const endTime = formatToDateTime(state.datePicker.pitchData.endTime, 'YYYYMMDD');
				const startTime2 = formatToDateTime(state.datePickerTwo.pitchData.startTime, 'YYYYMMDD');
				const endTime2 = formatToDateTime(state.datePickerTwo.pitchData.endTime, 'YYYYMMDD');
				getTrafficMonitorByTime({
						nodeId: nodeId.value, // 区域ID
						roadId: roadId.value ||
							'', // useNodeAndRoad中将roadId设置为undefined,为了不改之前逻辑，回退成空字符串
						granularity: 2,
						analyzeDatetype: 0,
						compareDatetype: 0,
						analyzeDate: `${startTime},${endTime}`,
						compareDate: `${startTime},${endTime}`,
						analyzeDate2: `${startTime2},${endTime2}`,
						compareDate2: `${startTime2},${endTime2}`,
					})
					.then((res) => {
						state.leftChartRef.list = res.date1.result.list;
						state.leftChartRef.list2 = res.date2.result.list;

						sessionStorage.setItem('list', JSON.stringify(res.date1.result.list));
						sessionStorage.setItem('list2', JSON.stringify(res.date2.result.list));

						state.leftChartRef.echartShow(true);
						state.leftChartRef.chart5();
						state.leftChartRef.chart6();
						state.leftChartRef.chart7();

						const result = res.roadInfo?.result;
						if (result.list?.length) {
							const arr = result.list[0]?.sparseLoc.split(',');
							const conPoint = new window.BMap.Point(arr[0], arr[1]);
							state.map.centerAndZoom(conPoint, 16);
							polyline(state.map, arr);
						}
						state.loading = false;
						state.chartPannelExpanded = true;
						state.tabsRef.roadsLoading = false;
					})
					.catch(() => {
						state.loading = false;
						state.chartPannelExpanded = false;
					});

				if (day == '本周') {
					state.nianduShow = false;
					state.echartShow = true;
					state.leftChartRef.echartShow(true);
					sessionStorage.removeItem('mapTrue');
					sessionStorage.removeItem('checkData');
					userStore.mapChangeOk(false);
				} else if (day == '本年度') {
					state.echartShow = false;
					userStore.mapChangeOk(false);
					state.nianduShow = true;
					state.leftChartRef.echartShow(false);
				}
			};

			/**
			 * 实时路况图层相关
			 */
			const {
				showTrafficPannel
			} = useMapTraffic({
				map: () => state.map,
				visible: false,
			});
			// 表格点击
			const tableSelect = (currentRow, queryForm, type) => {
				state.roadForm = {
					roadId: currentRow.roadId || '',
					startDate: queryForm.time[0].split(' ')[0],
					endDate: queryForm.time[1].split(' ')[0],
					type: queryForm.period,
				};
				// state.roadsLoading = true;
				state.chartPannelExpanded = true;
				state.leftChartRef.init(state.roadForm);
			};
			onMounted(() => {
				nextTick(() => {
					const {
						WC
					} = state.map;
					// console.log("state.userStore.WC",WC.lng);
					showTrafficPannel();
					const conPoint = new window.BMap.Point(WC.lng, WC.lat);
					setTimeout(() => {
						state.map.centerAndZoom(conPoint, 13);
					}, 800);
				});
			});
			const reset = () => {
				state.chartPannelExpanded = false;
				resetNodeId();
				state.datePicker?.reset?.();
				state.datePickerTwo?.reset?.();
			};
			const tabsClick = (type, form) => {
				// console.log("12334");
				emitter.emit('ctlRlfx', false);
				state.chartPannelExpanded = type;
				if (type) {
					state.roadForm = form;
					state.leftChartRef.init(form);
				} else {
					state.map.clearOverlays();
				}
			};
			return {
				handleSearch,
				...toRefs(state),
				showTrafficPannel,
				reset,
				tabsClick,
			};
		},
	});
</script>
<style lang="less" scoped>
	.rltico {
		width: 100vw;
		position: fixed;
		bottom: 0px;
		z-index: 5;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		.li {
			display: flex;
			align-items: center;
			background-color: #fff;
			font-size: 12px;
			color: #9d9d9d;
			padding: 0 10px;
			border-radius: 2px;

			div {
				font-size: 14px;
				color: #5b5b5b;
			}

			span {
				width: 10px;
				height: 10px;
				margin-left: 10px;
				margin-right: 5px;
			}

			.ct {
				background-color: #4CAF50;
			}

			.hx {
				background-color: #FFC107;
			}

			.yd {
				background-color: #E54C45;
			}

			.yzyd {
				background-color: #AA2017;
			}
		}
	}

	// .box {
	//   overflow: hidden;
	// }
	// .rlt{
	//   color: #333;
	//   background: f7f7f7;
	// }
</style>